Skip to content

feat(e2e): add Percy visual regression tests for priority component areas#2

Open
devin-ai-integration[bot] wants to merge 1 commit intomainfrom
devin/1768169288-percy-visual-regression-tests
Open

feat(e2e): add Percy visual regression tests for priority component areas#2
devin-ai-integration[bot] wants to merge 1 commit intomainfrom
devin/1768169288-percy-visual-regression-tests

Conversation

@devin-ai-integration
Copy link
Copy Markdown

feat(e2e): add Percy visual regression tests for priority component areas

Summary

This PR expands Percy visual regression test coverage across priority component areas in the SKY UX component library. The new tests capture interactive states (hover, focus), validation states, and responsive behavior at mobile breakpoints.

Changes by area:

Form Components - Added tests for checkbox (validation error, hover, focus), input-box (disabled, hint text, placeholder, error+button states), and radio-button (focus, hover, validation error)

Layout & Responsive - Added mobile width breakpoint tests for fluid-grid, box, and card components, plus context menu open state for box and hover state for card

Interactive Overlays - Added hover/focus states for dropdown buttons and menu items, autocomplete focus and result hover states, colorpicker hover/focus and preset selection

Critical User Flows - Added mobile responsive tests and action button states for error pages, tab navigation states (hover, focus, navigated), and paging button states with navigation

Review & Testing Checklist for Human

  • Verify CSS selectors match actual DOM - Selectors like .sky-paging-btn, .sky-error-action button, .sky-btn-tab were based on existing patterns but not verified against live components
  • Run the affected e2e tests locally - Tests passed lint but were not executed; run nx e2e <project>-e2e for affected projects to verify tests work
  • Check Percy snapshot naming conventions - Ensure snapshot names align with existing Percy baseline expectations
  • Review mobile width test structure - Some tests iterate MOBILE_WIDTHS inside single it() blocks; verify this is acceptable for the test framework

Recommended test plan:

  1. Run npm run lint:affected to verify lint passes (already done)
  2. Run e2e tests for at least one project from each category to verify selectors work
  3. Trigger a Percy build to verify snapshots are captured correctly

Notes

  • All tests follow established patterns from existing e2e tests in the codebase
  • Uses E2eVariations.forEachTheme(), DISPLAY_WIDTHS, and MOBILE_WIDTHS utilities consistently
  • 566 lines added across 12 test files

Link to Devin run: https://app.devin.ai/sessions/c19c2f1df206434b9433e55d9aa21547
Requested by: @bcmake

…reas

- Add enhanced tests for Form Components (input-box, checkbox, radio-button)
  - Disabled states, hint text, placeholder, error states
  - Hover, focus, and validation error states

- Add enhanced tests for Layout & Responsive Components (fluid-grid, box, card)
  - Mobile width breakpoint testing
  - Context menu open states
  - Hover states

- Add enhanced tests for Interactive Overlay Components (dropdown, autocomplete, colorpicker)
  - Hover and focus states for buttons
  - Menu item hover states
  - Highlighted result states
  - Preset color selection

- Add enhanced tests for Critical User Flows (error, tabs, paging)
  - Mobile width responsive testing
  - Action button hover and focus states
  - Tab navigation states
  - Paging button states and navigation

Co-Authored-By: benc@cognition.ai <Benc@windsurf.com>
@devin-ai-integration
Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants